{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}

<style type="text/css">
            .mui-content{margin: 0; padding-bottom: 50px;}
            .mui-input-group .mui-input-row:after{ left: 0;}
            .mui-input-group .mui-input-row:nth-child(3):after{ height: 0;}
        </style>

{% endblock %}

{# bodyd代码#}
{% block body %}


        <div class="mui-content">
            <!--题目详情-->
            <form class="mui-input-group">
                <div class="mui-input-row mb-input-row">
                    <label>年级</label>
                    <button id='showUserPicker' class="btn mui-btn mui-btn-block userResult">请选择</button>
                    <i class="mui-icon mui-icon-arrowright"></i>
                </div>
                <div class="mui-input-row">
                    <label>知识点</label>
                    <input class="mui-text-right" type="text" placeholder="请输入知识点">
                </div>
                <div class="mui-input-row mui-input-rows mb-input-row">
                    <label>题型选择</label>
                    <button id='showUserPicker1' class="btn mui-btn mui-btn-block userResult1">请选择</button>
                    <i class="mui-icon mui-icon-arrowright"></i>
                </div>
                
                <div class="add-task-cont">
                    <h4 class="add-task-edit">编辑题目</h4>
                    <div class="mb-topic task-tit">
                        <textarea placeholder="请输入题目内容"></textarea>
                    </div>
                    <h4 class="add-task-edit">编辑备选答案</h4>
                    <div class="mui-input-row">
                        <label>答案A</label>
                        <input class="mui-text-right" type="text" placeholder="请输入答案A">
                    </div>
                    <div class="mui-input-row">
                        <label>答案B</label>
                        <input class="mui-text-right" type="text" placeholder="请输入答案B">
                    </div>
                    <div class="mui-input-row">
                        <label>答案C</label>
                        <input class="mui-text-right" type="text" placeholder="请输入答案C">
                    </div>
                    <div class="mui-input-row">
                        <label>答案D</label>
                        <input class="mui-text-right" type="text" placeholder="请输入答案D">
                    </div>
                    <h4 class="add-task-edit">编辑正确答案</h4>
                    <div class="mui-input-row">
                        <label>正确答案</label>
                        <input class="mui-text-right" type="text" placeholder="请输入正确答案的编号">
                    </div>
                    <h4 class="add-task-edit">编辑解析</h4>
                    <div class="mb-topic task-cont">
                        <textarea placeholder="请输入题目详细解析"></textarea>
                    </div>
                </div>
            </div>
            
            <!--发帖子、提问-->
            <div class="task-submit-btn">
                <input type="button" name="" id="" value="提交审核" onClick="location.href='add-task-succeed.html'"> />
            </div>
        </form>
 

{% endblock %}

{#js代码#}
{% block js %}
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script type="text/javascript">
            (function($, doc) {
                $.init();
                //年级
                $.ready(function() {
                    /**
                     * 获取对象属性的值
                     * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
                     * @param {Object} obj 对象
                     * @param {String} param 属性名
                     */
                    var _getParam = function(obj, param) {
                        return obj[param] || '';
                    };
                    //普通示例
                    var userPicker = new $.PopPicker();
                    userPicker.setData([{
                        value: "yishang",
                        text: "一年级上册"
                    }, {
                        value: 'yixia',
                        text: '一年级下册'
                    }, {
                        value: 'ershang',
                        text: '二年级上册'
                    }, {
                        value: 'erxia',
                        text: '二年级下册'
                    }, {
                        value: 'sanshang',
                        text: '三年级上册'
                    }, {
                        value: 'sanxia',
                        text: '三年级下册'
                    }, {
                        value: 'sishang',
                        text: '四年级上册'
                    }, {
                        value: 'sixia',
                        text: '四年级下册'
                    }, {
                        value: 'wushang',
                        text: '五年级上册'
                    }, {
                        value: 'wuxia',
                        text: '五年级下册'
                    }, {
                        value: 'liushang',
                        text: '六年级上册'
                    }, {
                        value: 'liuxia',
                        text: '六年级下册'
                    }, {
                        value: 'qishang',
                        text: '七年级上册'
                    }, {
                        value: 'qixia',
                        text: '七年级下册'
                    }, {
                        value: 'bashang',
                        text: '八年级上册'
                    }, {
                        value: 'baxia',
                        text: '八年级下册'
                    }, {
                        value: 'jiushang',
                        text: '九年级上册'
                    }, {
                        value: 'jiuxia',
                        text: '九年级下册'
                    }]);
                    var showUserPickerButton = doc.getElementById('showUserPicker');
                    var userResult = doc.getElementsByClassName('userResult')[0];
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            userResult.innerText = items[0].text;
                        });
                    }, false);
                });
                
                $.ready(function() {
                    /**
                     * 获取对象属性的值
                     * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
                     * @param {Object} obj 对象
                     * @param {String} param 属性名
                     */
                    var _getParam = function(obj, param) {
                        return obj[param] || '';
                    };
                    //普通示例
                    var userPicker = new $.PopPicker();
                    userPicker.setData([{
                        value: "danxuan",
                        text: "单选"
                    }, {
                        value: 'duoxuan',
                        text: '多选'
                    }, {
                        value: 'tiankong',
                        text: '填空'
                    }, {
                        value: 'panduan',
                        text: '判断'
                    }, {
                        value: 'zuowen',
                        text: '作文'
                    }, {
                        value: 'fenxi',
                        text: '分析'
                    }]);
                    var showUserPickerButton = doc.getElementById('showUserPicker1');
                    var userResult = doc.getElementsByClassName('userResult1')[0];
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            userResult.innerText = items[0].text;
                        });
                    }, false);
                });
                
                
            })(mui, document);
        </script>


{% endblock %}
